<template>
  <div class="cartcontrol">
  <transition name="move">  <i class="iconfont icon-jian reduce" v-show="food.count>0" @click.stop.prevent="reduce"></i></transition>
    <div class="cart-count" v-show="food.count>0">{{food.count}}</div>
          <i class="iconfont icon-jia add" @click.stop.prevent="addCart" ></i>
    
    </div>
  </div>
</template>
<script type="ecmascript-6">
import Vue from 'vue';
  export default{ 
  	name:'', 
  	props:{
  		food:{
  			type:Object
  		}
  	},
  	methods:{
  		addCart(event){
  			if (!this.food.count) {
  				Vue.set(this.food,'count',1);
  			}else{
  				this.food.count++;
  			}
         this.$emit('add', event.target);
  		},
  		reduce(){
  			if(this.food.count){
  				this.food.count--;
  			}
  		}		
  	},
  components:{} }
</script>
<style rel="stylesheet" lang="less" >
.cartcontrol{
	font-size: 0;
	line-height: 1.2rem;
	.reduce,.add{
		display: inline-block;
		border: 0.3rem solid transparent;
		font-size: 18px;
		color:#00a0dc; 
	}
    .move-enter-active,.move-leave-active{
      transition:all 0.4s linear;
      transform:translate3D(0,0,0) rotate(0);
  }
    .move-enter,.move-leave-to{
      opacity: 0;
      transform:translate3D(24px,0,0) rotate(180deg);
    }
	.cart-count{
		display: inline-block;
		width: 12px;
		padding-top: 0.3rem;
		text-align: center;
		font-size: 14px;
		color: #93999f;
	}
}
</style>
